<template>
  <div  >
		<div   class="backBtn" @click="jumpIndex()">
			<i  class="icon iconfont icon-back"></i>
		</div>
		<div   class="mainWrap paddingBtm">
			<div   class="headContainer">
				<div   class="headImg" style="background-image: url(&quot;https://mrshsjcl.mingrenkuaile.com/API/Images/20190619231310_2849.jpeg&quot;);">
					<div   class="blurBg">
					</div>
				</div>
			</div>
			<div   class="section">
				<div   class="title">
					提现管理
				</div>
			</div>
			<div   class="mainInner">
				<div   class="section">
					<div   class="section-content info">
						<ul  >
							<li  ><label  >整单金额</label><span  ><input   type="number" placeholder="请输入整单金额" v-model="nowMoney"></span></li>
							<!-- <li  ><label  >优惠金额</label><span   class="red"></span></li>
							<li  ><label  >实付金额</label><span   class="blue"></span></li> -->
							<li  ><label  >选择提现方式</label><span></span></li>
							<!---->
							<li class="payment"><span   class="iconBox"><i class="icon iconfont icon-wechat"></i></span><label>微信</label><span   class="iptBox blue">
							</span><img src="/static/img/work_list_select.png" alt=""></li>
              
						</ul>
					</div>
				</div>
			</div>
			<div   class="payCont">

				<div   class="right" @click="goRechargeFn">
					<img   src="/static/img/logo_btn.png" alt="">去提现
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { MemberBaseInfoUrl,RechargePayUrl,CashoutAddUrl } from "@/api/axiosFun";
import { UnifiedOrder,OrderQuery,ConfigJs } from "@/api/login";

export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      bannerList: [],
      datalist: [],
      currentIndex: 1,
      page: 1,
      pageSize: 100,
      traderType: 1,
      nowMoney: "",
      cityId: "",
      orderNum: false,
      Latitude: "",
      Longitude: "",
      datainfo:{},
      payinfo:{},
      oid: ""
    };
  },
  created() {
    if(this.$route.params && this.$route.params.id){
      this.datainfo = this.$route.params.id;
    }else {
      this.datainfo = {};
    }
    this.getConfig();
  },
  mounted() {
    //this.init();
  },
  methods: {
    init() {
      MemberBaseInfoUrl().then(res => {
        console.log(res);
        if (res.errCode == 0) {
          //this.bannerList = res.data;
        }
      });
    },
    jumpIndex(){
      this.$router.replace('/')
    },
    payType(index){
      this.currentIndex = index;
    },
    // getPayinfo(){
    //   UnifiedOrder({
    //     traderId:this.datainfo.id,
    //     payType:this.currentIndex,
    //     money:parseFloat(this.nowMoney)
    //   }).then(res=>{
    //     console.log(res);
    //     if(res.data.data!=null){
    //       this.payinfo=res.data.data
    //       this.pay()
    //     }
    //   })
    // },
    goRechargeFn(){
      console.log(999);
      CashoutAddUrl().then(res => {
        console.log(res);
        //if (res.errCode == 0) {
          //this.bannerList = res.data;
        //}
      });
        // RechargePayUrl({
        //   money:Number(this.nowMoney)
        // }).then(res=>{
        //   console.log(res);
        //   if(res.errCode == 0){
        //     this.payinfo=res.data;
        //     this.pay()
        //   }
        // });
    },
    pay(){
        console.log(this.payinfo);
     let that=this
      wx.chooseWXPay({
        appId:'wx9b4743a1848616d3',      
        timestamp: this.payinfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: this.payinfo.nonceStr, // 支付签名随机串，不长于 32 位
        package: this.payinfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: this.payinfo.paySign, // 支付签名
        success: function (res) {
            // 支付成功后的回调函数
            console.log(res);
            that.orderQuery();
        },
        cancel: function(res) {
            console.log(res);
        },
        fail:function(res){
            console.log(res);
            //支付失败
        }
      });
    },
    getConfig(){
      ConfigJs(window.location.href).then((res)=>{
          console.log(res);
        let data=res.data.data
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
      })
    },
    orderQuery(){
      OrderQuery(this.payinfo.outNo).then(res=>{
          console.log(res);
           if (res.data.data!='支付成功'){
                setTimeout(function(){
                    this.orderQuery()
                },2000);
            }else{
                //Toast(res.data.data);
                this.$router.push('/my')
           }
      })
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.backBtn {
    width: 1.25rem;
    height: 1.25rem;
    background: -webkit-gradient(linear,left top,right top,from(rgba(0,170,255,.5)),to(rgba(0,133,255,.5)));
    background: linear-gradient(90deg,rgba(0,170,255,.5),rgba(0,133,255,.5));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    position: fixed;
    top: .44rem;
    left: .44rem;
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
}
.backBtn i {
    font-size: .64rem;
    font-weight: 700;
    color: #fff;
}
.mainWrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.mainWrap.paddingBtm {
    padding: 0 0 3.04rem;
}
.headContainer {
    position: relative;
    width: 100%;
    height: 3.32rem;
    margin-bottom: .3rem;
    background: #fff;
}
.headImg {
    width: 100%;
    height: 2.88rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.headImg .blurBg {
    width: 100%;
    height: 100%;
    background: inherit;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4,MakeShadow=false);
}
.shopLogo {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: -1.25rem;
    border-radius: 9px;
    overflow: hidden;
}
.shopLogo img {
    width: 100%;
    height: 100%;
}
.section {
    padding: .4rem 0;
    margin-bottom: .16rem;
    background: #fff;
    position: relative;
}
.title {
    height: .88rem;
    line-height: .88rem;
    font-size: .55rem;
    color: #333;
    text-align: center;
    font-weight: 700;
}
.section-head {
    font-size: .41rem;
    color: #000;
    font-weight: 700;
    padding: .14rem .44rem;
}
.section-content.activity, .section-content.info {
    padding: 0 .44rem;
}
.activityBox {
    height: .75rem;
    line-height: .75rem;
}
.activityBox span {
    display: inline-block;
    padding-right: .2rem;
    color: #333;
    font-size: .33rem;
}
.activityBox .activityIcon {
    display: inline-block;
    background-color: #9c9c9c;
    border-radius: 3px;
    height: .48rem;
    line-height: .48rem;
    padding: .05rem .1rem;
    font-size: .3rem;
    color: #fff;
    text-align: center;
}
.activityBox i {
    font-style: normal;
}
.activityBox span {
    display: inline-block;
    padding-right: .2rem;
    color: #333;
    font-size: .33rem;
}
.activityBox .activityIcon {
    display: inline-block;
    background-color: #9c9c9c;
    border-radius: 3px;
    height: .48rem;
    line-height: .48rem;
    padding: .05rem .1rem;
    font-size: .3rem;
    color: #fff;
    text-align: center;
}
.activityBox i {
    font-style: normal;
}
.mainInner {
    padding: .16rem;
    background: -webkit-gradient(linear,left top,left bottom,from(#0085ff),to(#fff));
    background: linear-gradient(180deg,#0085ff,#fff);
}
.section {
    padding: .4rem 0;
    margin-bottom: .16rem;
    background: #fff;
    position: relative;
}
.section-content.activity, .section-content.info {
    padding: 0 .44rem;
}
.section-content.info li {
    padding: .4rem 0;
    height: .6rem;
    line-height: .6rem;
    border-bottom: 1px dashed #f2f2f2;
    overflow: hidden;
}
.section-content.info li input, .section-content.info li label, .section-content.info li span {
    display: block;
}
.section-content.info li label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .35rem;
    color: #333;
    font-weight: 700;
    float: left;
}
.section-content.info li span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .37rem;
    color: #666;
    text-align: right;
    letter-spacing: 1px;
    float: right;
}
.section-content.info li span input {
    width: 100%;
    height: .6rem;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    float: left;
    color: #0085ff;
}
.section-content.info li span.red {
    color: #f07373;
}
.section-content.info li span.blue {
    color: #0085ff;
    font-weight: 700;
}
.section-content.info li {
    padding: .4rem 0;
    height: .6rem;
    line-height: .6rem;
    border-bottom: 1px dashed #f2f2f2;
    overflow: hidden;
}
.section-content.info li img {
    width: 24px;
    float: right;
}
.section-content.info li span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .37rem;
    color: #666;
    text-align: right;
    letter-spacing: 1px;
    float: right;
}
.section-content.info li.payment span {
    width: 4rem;
    float: left;
}
.section-content.info li.payment span.iconBox {
    width: .6rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    position: relative;
}
.section-content.info li span i {
    color: #b8b8b8;
    font-size: .56rem;
}
.section-content.info li.payment span.iconBox i {
    font-size: .56rem;
    margin-left: -.15rem;
    color: #3eb94e;
}
.section-content.info li.payment label {
    width: 1.8rem;
    padding-left: .2rem;
    float: left;
}
.section-content.info li span.blue {
    color: #0085ff;
    font-weight: 700;
}
.section-content.info li.payment span.iptBox {
    width: 2.4rem;
    float: right;
}
.payCont {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 1.42rem;
    padding: .2rem;
    font-size: .44rem;
    color: #fff;
    background: #3c3c3c;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.payCont .left {
    width: 100%;
    height: 1.42rem;
    text-indent: .16rem;
    font-weight: 700;
    font-size: .37rem;
    text-align: center;
    overflow: hidden;
}
.payCont .right {
    width: 100%;
    height: 1.42rem;
    text-align: center;
    background: #44b549;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: .1rem;
    color: hsla(0,0%,100%,.95);
    font-size: .48rem;
}
.payCont .right img {
    width: .6rem;
    margin-right: .1rem;
}
.section-content.info li.payment span.iptBox img{
  width: 24px;
  float: right;
}
</style>
